<template>
	<view class="detail-view">
		<view class="loading-view" v-if="!listData.length && !noData">
			<uni-load-more status="loading"></uni-load-more>
		</view>
		<view class="content">
			<template v-for="item in listData" :key="item._id">
				<navigator :url="`/pages/preview/preview?id=${item._id}`" class="item">
					<image :src="item.smallPicurl" mode="aspectFill"></image>
				</navigator>
			</template>
		</view>
		<view class="loading-view" v-if="listData.length || noData">
			<uni-load-more :status="noData ? 'noMore' : 'loading'"></uni-load-more>
		</view>
		<view class="safe-area-inset-bottom"></view>
	</view>
</template>

<script setup>
	import {
		getDetailOfClassify,
		getSelfOfWallInfo
	} from '@/api/requestInterface.js'


	// 使用pinia 管理数据缓存
	import {
		useWallListStore
	} from '@/stores/wallList.js'
	const wallList = useWallListStore()


	// 查询参数
	const queryParam = ref({
		pageNum: 1,
		pageSize: 12,
		classid: '',
		name: '',
		type: ''
	})
	const listData = ref([])
	const noData = ref(false)

	// 获取跳转传递的参数
	onLoad((event) => {
		const {
			id = null, name = null, type = null
		} = event

		queryParam.value.classid = id
		queryParam.value.name = name
		queryParam.value.type = type

		// 设置页面导航栏标题
		uni.setNavigationBarTitle({
			title: event.name
		})
		// 执行接口数据调用
		loadListData()
	})

	// 获取壁纸分类详情
	const loadListData = async () => {
		let response = {}
		if (queryParam.value.classid) {
			response = await getDetailOfClassify(queryParam.value)
		} else {
			response = await getSelfOfWallInfo(queryParam.value)
		}

		if (response.errCode === 0) {
			listData.value = [...listData.value, ...response.data]
			if (queryParam.value.pageSize > response.data.length) {
				noData.value = true
			}
			wallList.updateData(listData.value)
		} else {
			listData.value = []
		}
	}
	// 页面触底事件
	onReachBottom(() => {
		if (noData.value) return
		queryParam.value.pageNum++
		loadListData()
	})

	// 分享
	onShareAppMessage((e) => {
		return {
			title: '壁纸',
			path: `/pages/detail/detail?id=${queryParam.value.classid}&name=${queryParam.value.name}`
		}
	})

	// 分享朋友圈
	onShareTimeline(() => {
		return {
			title: '壁纸',
			query: `id=${queryParam.value.classid}&name=${queryParam.value.name}`
		}
	})

	// 清空缓存
	onUnload(() => {
		wallList.resetData()
	})
</script>

<style lang="scss" scoped>
	.detail-view {
		.content {
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			gap: 5rpx;
			padding: 0 5rpx;

			.item {
				height: 440rpx;

				image {
					width: 100%;
					height: 100%;
					display: block;
				}
			}
		}
	}
</style>